<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Security-Policy"
    content="font-src 'self' data:; img-src 'self' data:; default-src 'self' http://127.0.0.1:5000/">

  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.css" />
  <link rel="stylesheet" href="style/index.css">
  <link rel="stylesheet" href="node_modules/chart.js/dist/Chart.min.css">

  <script src='node_modules/jquery/jquery.min.js'></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
  <script src="node_modules/chart.js/dist/Chart.min.js"></script>
  <script type="module" src="js/requests.js"></script>

  <title>Mi action</title>
</head>

<body>

  <!-- Navbar-->
  <nav class="navbar navbar-ligh navbar-style">
    <a class="navbar-brand" href="#">
      <img src="images/miaction.png" width="150" height="42">
    </a>

    <div class="btn-group">
      <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdown-devices" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">Disconnected</button>

      <div class="dropdown-menu dropdown-menu-right" id="dropdown-bluetooth">
        <div class="d-flex justify-content-center">
          <h6 class="dropdown-header">Searching</h6>
          <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </div>
      </div>
    </div>

  </nav>

  <div class="alert alert-success" id="success-alert">
    <button type="button" class="close" data-dismiss="alert">x</button>
    <strong>Success! </strong> Product have added to your wishlist.
  </div>

  <div class="container-fluid container-style">

    <!--Device Card -->
    <div class="row">
      <div class="col-md-12">
        <div class="card card-stats mb-4 mb-xl-0" id="device-card">
          <div class="card-body">
            <div class="row">
              <div class="col">
                <h5 class="section-name">DEVICE</h5>
                <span class="title" id="device-title"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Features Card-->
    <div>
      <div class="row">
        <div class="col-md-6">
          <div class="card shadow block">
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <h5 class="section-name">FEATURE</h5>
                  <span class="section-title">Steps Monitor</span>
                  <div align="center">
                    <span class="data-info" id="steps">0</span>
                    <span class="data-type">steps</span>
                  </div>
                </div>
                <div class="col-auto">
                  <div class="icon-shape section-icon bg-warning text-white rounded-circle">
                    <i class="fas fa-walking fa-3x"></i>
                  </div>
                </div>
              </div>
              <div class="d-flex justify-content-end">
                <button type="button" class="btn button" id="btn-steps">Get</button>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <div class="card shadow block">
            <div class="card-body">
              <div class="row">
                <div class="col">
                  <h5 class="section-name">FEATURE</h5>
                  <span class="section-title">Heart Monitor</span>
                  <div align="center">
                    <span class="data-info" id="heart-rate">0</span>
                    <span class="data-type">bpm</span>
                  </div>
                </div>
                <div class="col-auto">
                  <div class="icon-shape section-icon bg-danger text-white rounded-circle">
                    <i class="fas fa-heartbeat fa-3x"></i>
                  </div>
                </div>
              </div>
              <div class="d-flex justify-content-end">
                <button type="button" class="btn button" id="btn-heart">Get</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--Charts -->
    <div>
      <div class="row">
        <div class="col-md-6">
          <div class="card block">
            <div class="card-body">
              <h5 class="section-name">CHART</h5>
              <span class="section-title">Steps Analytics</span>
              <div class="chart">
                <canvas id="stepsChart"></canvas>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <div class="card shadow block">
            <div class="card-body">
              <h5 class="section-name">CHART</h5>
              <span class="section-title">Heart Analytics</span>

              <div class="chart">
                <canvas id="heartChart"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <script src="./renderer.js"></script>
</body>

</html>